<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">库存 /</div>
            <div class="am-btn-group am-btn-group-sm btn-group">
                <!-- <button type="button" class="am-btn am-btn-default" @click="add"><i class="am-icon-plus"></i>&nbsp;新增</button>
                <button type="button" class="am-btn am-btn-default" @click="addMenu">生成餐单</button> -->
                <el-row>
                    <el-col :span="6">
                        食物分类:<el-input v-model="categoryString" placeholder="食物分类" clearable @change='onCategoryChanged'></el-input>
                    </el-col>
                    <el-col :span="6">
                        食物:<el-input v-model="name" placeholder="食物" clearable @change='onFoodChanged'></el-input>
                    </el-col>
                </el-row>
                <button type="button" class="am-btn am-btn-default" @click="logs">使用日志</button>
            </div>
            <table class="am-table table">
                <thead>
                    <tr>
                        <th>食物分类</th>
                        <th>食物</th>
                        <th>数量</th>
                        <th>规格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <!-- <td class="am-text-middle">{{ item.parentCategoryName }} / {{ item.categoryName }}</td> -->
                        <td class="am-text-middle">{{ item.categoryString }}</td>
                        <td class="am-text-middle">{{ item.name }}</td>
                        <td class="am-text-middle">
                            <input type="number" :id="'item-' + item.id" class="no-border" :value="item.weight" @change="changeValue(item.id)" />
                        </td>
                        <td class="am-text-middle">{{ item.unit }}</td>
                        <td class="am-text-middle">
                            <button class="am-btn am-btn-default am-btn-xs" @click="edit(item.id)">编辑</button>
                            <button class="am-btn am-btn-danger am-btn-xs" @click="del(item.id)"><i class="am-icon-trash"></i>&nbsp;删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <#include "/boya/template/page.html" />
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                categoryString: '${categoryString!}',
                name: '${name!}',
            }
        },
        mounted: function() {
            var jsonStr = '${list!}';
            if (jsonStr != '') {
                this.list = JSON.parse(jsonStr)
                // for (var index in this.list) {
                //     this.list[index].weight = accMul(this.list[index].weight, 0.001);
                // }
            }
        },
        methods: {
            onCategoryChanged() {
                var keys = [
                    { 'key': 'categoryString', 'value': this.categoryString }
                ]
                goPage(1, keys);

            },
            onFoodChanged() {
                var keys = [
                    { 'key': 'name', 'value': this.name }
                ]
                goPage(1, keys);
            },
            add() {
                layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/boya/addStorage'
                });
            },
            addMenu() {
                window.location.href = "/boya/genMenu";
            },
            logs() {
                window.location.href = "/boya/logs";
            },
            changeValue(id) {
                var val = Number($("#item-" + id).val());
                if (val < 0) {
                    msg("库存不能为负数");
                    return;
                }
                var param = Qs.stringify({
                    id: id,
                    // weight: accMul(val, 1000)
                    weight: val
                });
                axios({
                        url: '/boya/updateStorage',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            // window.location.reload();
                        } else {
                            msg("保存失败：" + response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        msg("保存失败");
                        console.log(error);
                    });
            },
            edit(id) {
                layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/boya/editStorage?id=' + id
                });
            },
            del(id) {
                confirm("确认删除？", function() {
                    var param = Qs.stringify({
                        id: id
                    });
                    axios({
                            url: '/boya/delStorage',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            if (response.data.status == 200) {
                                // msg("删除成功");
                                window.location.reload();
                            } else {
                                msg("删除失败");
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            msg("删除失败");
                            console.log(error);
                        });
                })
            },
            onPageChange(val) {
                goPage(val);
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .btn-group {
        margin-bottom: 10px;
    }

    .table {
        /*width: auto;*/
    }

    .no-border {
        border: none;
    }
    </style>
</body>

</html>